<seed-content>
  <seed-toolbar-header>
    <seed-toolbar-title>教学日历</seed-toolbar-title>
    <seed-toolbar-menu></seed-toolbar-menu>
  </seed-toolbar-header>
  <!--显示日历数据-->
  <header class="seed-flexbox seed-flexbox-content-between seed-flexbox-align-center">
    <span class="left-arrow" (click)="nextWeek(-1)"></span>
    <p class="seed-flexbox seed-flexbox-content-center">
      <span>{{startTime | date: "yyyy-MM-dd"}}</span>
      <span> ~ </span>
      <span>{{endTime | date: "yyyy-MM-dd"}}</span>
    </p>
    <span class="right-arrow" (click)="nextWeek(1)"> </span>
  </header>
  <div *ngIf="hasLoadData">
    <!--顶部日历选择-->
    <ul class="week-list seed-flexbox">
      <li class="day-wrap seed-flexbox seed-flexbox-content-center"
          [ngClass]="{'today': isToday(day), 'choose': i === chooseNum, 'no-right-border': last}"
          *ngFor="let day of weekTime; let i = index; let last = last;"
          (click)="chooseDay(i)">
        <span class="date-week">{{ weekText[ day.getDay()]}}</span>
        <span class="date-number">{{day | date: 'MM-dd'}}</span>
      </li>
    </ul>
    <!--内容-->
    <ul class="schedule-list">
      <li class=""
          [ngClass]="{'time-course': schedule.courseProperties === 2}"
          *ngFor="let schedule of showData">
        <div class="seed-flexbox">
          <!--<img seed-load-img [defaultImg]="'middle'" [src]="schedule.courseImg" class="course-pic">-->
          <seed-img [background]=" schedule.courseImg" [defaultImg]="'middle'"
                    [lazyLoadImg]=" schedule.courseImg"></seed-img>
          <div class="course-detail seed-flexbox-item seed-flexbox" [class.freeze]="schedule.freeze">
            <p class="course-name seed-flexbox">
              <span class="name">{{schedule.courseName}}</span>
              <span class="label-course" *ngIf="schedule.status === 3 && schedule.courseProperties !== 2">请假</span>
              <span class="label-course"
                    *ngIf="schedule.lessonStatus === 1 && schedule.courseProperties !== 2">补课</span>
              <!--<span class="label-course" *ngIf="false">赠</span>-->
              <span class="label-course freeze-label" *ngIf="schedule.freeze">冻结期，不可上课</span>
            </p>
            <p class="course-num-name course-detail-normal" *ngIf="schedule.courseProperties !== 2">
              课时{{ schedule.lessonNum}}: {{schedule.subjectName}}
            </p>
            <!--次课有限期-->
            <p class="course-rank course-detail-normal"
               *ngIf="schedule.courseProperties === 2">
              <!--有效期: {{schedule.expiresStartTime | date: "yyyy-MM-dd"}}~{{schedule.expiresEndTime | date: "yyyy-MM-dd"}}-->
              有效期: {{ schedule.expiresInfo }}
            </p>
            <p class="course-time course-detail-normal">
            <span class="normal">
              时间: {{schedule.startTime | date: "HH:mm"}} - {{schedule.endTime | date: "HH:mm"}}
            </span>
            </p>
            <p class="course-address course-detail-normal">
              场地: {{schedule.schoolName + schedule.address}}
            </p>
            <p class="course-teacher course-detail-normal">
              教练: {{schedule.teacherName }} {{schedule.scheduleType === 2 ? " [代课]" : ""}}
            </p>
          </div>
        </div>
        <p class="course-surplus course-detail-normal" *ngIf="schedule.courseProperties === 2">
          <!--无限期-->
          <!--<span *ngIf="schedule.expireType === 1" [class.warn]="schedule.overTotal < 10">剩余: {{schedule.overTotal}} 次</span>-->
          <!--&lt;!&ndash;有限期&ndash;&gt;-->
          <!--<span *ngIf="schedule.expireType === 0" [class.warn]="surplusDay(schedule.expiresEndTime) < 30">剩余: {{surplusDay(schedule.expiresEndTime)}} 天</span>-->
          <span>已销课: <span >{{schedule.usedTimes}}</span>{{schedule.remainUnit}}</span>
          <span>剩余<span [class.warn]="isWarn(1, schedule.remainUnit)">{{schedule.remainTimes}}</span>{{schedule.remainUnit}}</span>
        </p>
      </li>
      <li *ngIf="showData.length === 0 && hasLoadData">
        <seed-default-graph [text]="'暂无课程'"></seed-default-graph>
      </li>
    </ul>
  </div>
</seed-content>
